<template>
  <div class="header">
    <a-form layout="inline" class="form">
      <a-form-item label="状态">
        <a-select v-model:value="search.status" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in statusList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="类型">
        <a-select v-model:value="search.productType" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in productTypeList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="商品ID">
        <a-input v-model:value="search.productId" placeholder="输入商品ID" />
      </a-form-item>
      <a-form-item label="兑换时间">
        <a-range-picker v-model:value="search.date" />
      </a-form-item>
      <a-form-item label="会员ID">
        <a-input v-model:value="search.memberId" placeholder="输入会员ID" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model:value="search.mobile" placeholder="输入手机号" />
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="search.name" placeholder="输入姓名" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getTableData">查询</a-button>
        <a-button @click="onReset" class="btn">重置</a-button>
        <a-button type="success" class="btn" @click="onExport">导出</a-button>
      </a-form-item>
    </a-form>
  </div>
  <TablePage 
    :dataSource="dataSource"
    :columns="columns" 
    :paginationData="paginationData"
    @change="pageChange"
    @showSizeChange="showSizeChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'createTime'">
        {{proxy.$filters.formatDate(record.createTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'actions'">
        <a type="link" @click="onDetail(record)">查看/审核</a>
      </template>
    </template>
  </TablePage>
</template>

<script setup>
import { useRouter } from 'vue-router'
import TablePage from "@/components/TablePage/index.vue"
import { usePagination } from "@/useHooks/usePagination"
import { redeemList } from '@/api/product';
import { downloadFile } from '@/utils/index'
import { reactive, ref, watch, onMounted, computed } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const statusList = ref([
  {label: '全部',value: null},
  { label: '待审核', value: 0 },
  { label: '审核成功', value: 1 },
  { label: '审核拒绝', value: -1 },
])
const productTypeList = ref([
  { label: '全部', value: null },
  { label: '现金', value: 1 },
  { label: '话费', value: 2 },
  { label: '虚拟物品', value: 3 },
  {label: '实物', value: 4}
])
onMounted(() => {
  getTableData()
})
const router = useRouter()
const dataSource= ref([])
const columns = computed(() => {
  const arr = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 120
    },
    {
      title: '会员ID',
      dataIndex: 'uid',
      width: 120
    },
    {
      title: '会员姓名',
      dataIndex: 'realname',
      width: 120
    },
    {
      title: '类型',
      dataIndex: 'productTypeDesc',
      width: 160
    },
    {
      title: '商品',
      dataIndex: 'name',
      width: 160
    },
    {
      title: '积分',
      dataIndex: 'amount',
      width: 120
    },
    {
      title: '兑换时间',
      dataIndex: 'createTime',
      width: 140
    },
    {
      title: '状态',
      dataIndex: 'statusDes',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 120,
      fixed: 'right'
    }
  ]
  return arr;
})
const search = reactive({
  status: null,
  productType: null,
  productId: undefined,
  memberId: undefined,
  mobile: undefined,
  realname: undefined,
  date: [],
})
const onReset = () => {
  search.status = null
  search.productType = null
  search.memberId=undefined
  search.mobile = undefined
  search.realname = undefined
  search.date = []
  search.productId = undefined
  getTableData()
}
const { paginationData, pageChange, showSizeChange } = usePagination()
watch(paginationData, () => {
  getTableData()
})
const getTableData = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.date) && req.date.length >= 2 && req.date[0] && req.date[1]) {
    req.startDate = req.date[0].format('YYYY-MM-DD')
    req.endDate = req.date[1].format('YYYY-MM-DD')
  }
  delete req.date
  redeemList(req).then((res) => {
    paginationData.total = res.data.total
    dataSource.value = res.data.list.map(item => ({
      ...item,
      statusDes: statusList.value.find(i => i.value === item.status).label,
      productTypeDesc: item.productType ? productTypeList.value.find(i => i.value === item.productType).label : ''
    }))
  })
}
const onExport = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.date) && req.date.length >= 2 && req.date[0] && req.date[1]) {
    req.startDate = req.date[0].format('YYYY-MM-DD')
    req.endDate = req.date[1].format('YYYY-MM-DD')
  }
  delete req.date
  downloadFile('/product/redeem/list/export',req)
}
const onDetail = (record) => {
  router.push(`/product/recordDetail?id=${record.id}&uid=${record.uid}`)
}
</script>